<template>
  <el-scrollbar style="height:500px">
    表单的meta
    <el-row :gutter="20">
      <el-col :span="7">
        <elForm
          v-model="formBaseModel"
          v-bind="formBaseProps"
        />
      </el-col>
      <el-col :span="11">
        例子
        <elForm
          v-model="model"
          :partModel="partModel"
          v-bind="formProps"
        />
      </el-col>
      <el-col :span="6">
        model：<br>
        <div v-for="(item, key, index) in model" :key="index">
          {{key}}: {{item}}
        </div>
        <el-scrollbar style="height:500px">
          <jsonformat :json="formProps" />
        </el-scrollbar>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { nextTick, reactive, watch } from 'vue'
import VueDS from 'vue-data-state'

</script>

<script setup>
import elForm from '/ctrl/nf-el-form/el-form-div.vue'
import jsonformat from '../json-format/json-format.vue'

// 表单控件的 base 的json
import jsonFormBase from '../json/meta-form-base.json'

// 程序功能
// 表单控件的基础属性
const formBaseModel = reactive({
  formColCount: 1,
  colOrder: []
})
const formBaseProps = reactive(jsonFormBase.formMeta)

// ==============

// 表单的 model
const model = reactive({})
// 定义局部的 model
const partModel = reactive({})
// 定义局部的 model
const miniModel = reactive({})

// 定义表单的 meta
const formProps = reactive({
  formColCount: 1,
  colOrder: [],
  formColShow: {},
  ruleMeta: {},
  itemMeta: {},
  reload: false
})

// 状态
const { reg, get } = VueDS.useStore()
const helpDataBaseMeta = get.helpDataBaseMeta()

// 表的model
const modelTable = helpDataBaseMeta.tableMeta
// 字段的 model 数据列表
const modelColumList = helpDataBaseMeta.columnListMeta

// 根据数据设置表单需要的meta
const setFormMeta = () => {
  for (const key in modelColumList) {
    const item = modelColumList[key]
    // console.log(key, item)
    const colId = parseInt(item.columnId)
    // 添加 colOrder
    if (!formProps.colOrder.includes(colId)){
      formProps.colOrder.push(colId)
    }
    if (!formBaseModel.colOrder.includes(colId)){
      formBaseModel.colOrder.push(colId)
    }
    // 添加 itemMeta
    formProps.itemMeta[colId] = {
      controlId: colId,
      colName: item.colName,
      label: item.cnName,
      controlType: item.controlType,
      defValue: '',
      placeholder: item.cnName,
      title: item.cnName
    }
    // 根据字段类型，设置默认值

    // 设置 表单控件基础属性的 显示字段
    const options = formBaseProps.itemMeta['1006010'].optionList
    if (options.filter((a) => a.value === colId).length === 0){
      options.push({
        value: colId,
        label: item.cnName
      })
    }
  }
  formProps.reload = !formProps.reload
}

// 监听表单基础属性的变化
watch(() => formBaseModel, ()=> {
  formProps.formColCount = formBaseModel.formColCount
  formProps.colOrder = formBaseModel.colOrder
  formProps.reload = !formProps.reload
},{deep:true})

// 监听字段变化
watch(() => modelColumList, ()=> {
  setFormMeta()
},{deep:true})

</script>
